<!-- 登录 -->
<template>
  <div class="login-wp">
  	<div class="login-title">内控系统</div>
  	<div class="login-content">
  		<!-- <div class="ewm-btn" @click="toDingDing()">
  			<img src="/static/image/ewm.png"/>
  		</div> -->
  		<div class="title">账号密码登录</div>
  		<Account/>
  	</div>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import Account from "./component/account.vue";
	import {getDingdingJump} from "/@/api/login/index.ts";

	const _d = reactive({

	})
	
	onMounted(() => {
	
	})

	// 钉钉登录
	function toDingDing() {
		getDingdingJump().then(res => {
			// console.log(res);
			window.location.href = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${res.data.result}&response_type=code&client_id=ding1pbuqomoqo3xorul&scope=openid&state=kxcq&prompt=consent`;
		})
	}
</script>

<style lang="scss" scoped>
.login-wp {
	position: relative;
	width: 100vw;
	height: 100vh;
	padding: 20px 50px;
	background: #fff url(/static/image/login-bg.png) no-repeat 20% center;

	.login-title {
		position: absolute;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 70px;
		background: url(/static/image/logo.png) no-repeat left center;
		background-size: auto 100%;
		font-size: 28px;
	}

	.login-content {
		position: absolute;
		top: 50%;
		right: 10%;
		transform: translateY(-50%);
		padding: 30px 20px 20px;
		width: 310px;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		border-radius: 4px;
		overflow: hidden;
		.ewm-btn {
			position: absolute;
			top: -40px;
			right: -40px;
			width: 80px;
			height: 80px;
			border: 1px solid #d7d7d7;
			transform: rotate(45deg);
			cursor: pointer;
			overflow: hidden;
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%) inset;
			img {
				position: absolute;
				top: 54px;
				left: 24px;
				width: 30px;
				height: 30px;
				transform: rotate(-45deg);
			}
		}
		.title {
			font-size: 24px;
			text-align: center;
			margin-bottom: 30px;
		}
	}

}
</style>